.text-title {
  height: 40px;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
  position: relative;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  &::before {
    position: absolute;
    content: "";
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background-color: @primary-color;
  }
}

// drawer 底部按钮
.drawer-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  background-color: #fff;
  text-align: right;
  z-index: 1;
  padding: 10px 16px;
}


.h-full {height: 100%;}
.w-full {width: 100%;}
.h-screen {height: 100vh;}
.w-screen {width: 100vw;}

.absolute {position: absolute;}
.relative {position: relative;}

.h-1 { height: 1px; }
.h-2 { height: 2px; }
.h-3 { height: 3px; }
.h-4 { height: 4px; }
.h-5 { height: 5px; }

.w-10 { width: 10px; }

.t-0 {top: 0;}
.t-10 {top: 10px;}
.t-15 {top: 15px;}
.t-20 {top: 20px;}
.t-25 {top: 25px;}
.t-30 {top: 30px;}
.t-40 {top: 40px;}
.t-50 {top: 50px;}
.t-60 {top: 60px;}
.t-70 {top: 70px;}
.t-80 {top: 80px;}
.t-90 {top: 90px;}
.t-100 {top: 100px;}
.l-0 {left: 0;}
.l-10 {left: 10px;}
.l-15 {left: 15px;}
.l-20 {left: 20px;}
.l-25 {left: 25px;}
.l-30 {left: 30px;}
.l-40 {left: 40px;}
.l-50 {left: 50px;}
.l-60 {left: 60px;}
.l-70 {left: 70px;}
.l-80 {left: 80px;}
.l-90 {left: 90px;}
.l-100 {left: 100px;}
.r-0 {right: 0;}
.r-10 {right: 10px;}
.r-15 {right: 15px;}
.r-20 {right: 20px;}
.r-25 {right: 25px;}
.r-30 {right: 30px;}
.r-40 {right: 40px;}
.r-50 {right: 50px;}
.r-60 {right: 60px;}
.r-70 {right: 70px;}
.r-80 {right: 80px;}
.r-90 {right: 90px;}
.r-100 {right: 100px;}
.b-0 {bottom: 0;}
.b-10 {bottom: 10px;}
.b-15 {bottom: 15px;}
.b-20 {bottom: 20px;}
.b-25 {bottom: 25px;}
.b-30 {bottom: 30px;}
.b-40 {bottom: 40px;}
.b-50 {bottom: 50px;}
.b-60 {bottom: 60px;}
.b-70 {bottom: 70px;}
.b-80 {bottom: 80px;}
.b-90 {bottom: 90px;}
.b-100 {bottom: 100px;}

//边距
.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}
.mr-5 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-25 {margin-right: 25px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}
.mr-50 {margin-right: 50px;}

.mt-0 {margin-top: 0;}
.mt-2 {margin-top: 2px;}
.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}

.mb-0 {margin-bottom: 0;}
.mb-2 {margin-bottom: 2px;}
.mb-5 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-25 {margin-bottom: 25px;}
.mb-30 {margin-bottom: 30px;}
.mb-100 {margin-bottom: 100px;}

.mx-0 {margin-left: 0; margin-right: 0;}
.mx-5 {margin-left: 5px; margin-right: 5px;}
.mx-10 {margin-left: 10px; margin-right: 10px;}
.mx-15 {margin-left: 15px; margin-right: 15px;}
.mx-20 {margin-left: 20px; margin-right: 20px;}
.mx-25 {margin-left: 25px; margin-right: 25px;}
.mx-30 {margin-left: 30px; margin-right: 30px;}
.mx-40 {margin-left: 40px; margin-right: 40px;}

.my-0 {margin-top: 0; margin-bottom: 0;}
.my-5 {margin-top: 5px; margin-bottom: 5px;}
.my-10 {margin-top: 10px; margin-bottom: 10px;}
.my-15 {margin-top: 15px; margin-bottom: 15px;}
.my-20 {margin-top: 20px; margin-bottom: 20px;}
.my-25 {margin-top: 25px; margin-bottom: 25px;}
.my-30 {margin-top: 30px; margin-bottom: 30px;}
.my-40 {margin-top: 40px; margin-bottom: 40px;}

.p-0 {padding: 0;}
.p-5 {padding: 5px;}
.p-10 {padding: 10px;}
.p-15 {padding: 15px;}
.p-20 {padding: 20px;}
.p-25 {padding: 25px;}
.p-30 {padding: 30px;}
.py-40 {padding-top: 40px; padding-bottom: 40px;}
.px-40 {padding-left: 40px; padding-right: 40px;}
.px-30 {padding-left: 30px; padding-right: 30px;}
.py-30 {padding-top: 30px; padding-bottom: 30px;}
.px-25 {padding-left: 25px; padding-right: 25px;}
.py-25 {padding-top: 25px; padding-bottom: 25px;}
.px-20 {padding-left: 20px; padding-right: 20px;}
.py-20 {padding-top: 20px; padding-bottom: 20px;}
.px-10 {padding-left: 10px; padding-right: 10px;}
.py-10 {padding-top: 10px; padding-bottom: 10px;}
.px-15 {padding-left: 15px; padding-right: 15px;}
.py-15 {padding-top: 15px; padding-bottom: 15px;}
.px-5 {padding-left: 5px; padding-right: 5px;}
.py-5 {padding-top: 5px; padding-bottom: 5px;}
.pr-5 {padding-right: 5px;}
.pr-10 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-20 {padding-right: 20px;}
.pr-25 {padding-right: 25px;}
.pr-30 {padding-right: 30px;}
.pt-0 {padding-top: 0;}
.pl-5 {padding-left: 5px;}
.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-25 {padding-left: 25px;}
.pl-30 {padding-left: 30px;}
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pb-5 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-25 {padding-bottom: 25px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}


//flex
.flex { display: flex; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

.justify-start { justify-content: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.gap-1 { gap: 1px; }
.gap-2 { gap: 2px; }
.gap-3 { gap: 3px; }
.gap-4 { gap: 4px; }
.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }

//字体大小
.fs-30 {font-size: 30px;}
.fs-28 {font-size: 28px;}
.fs-26 {font-size: 26px;}
.fs-24 {font-size: 24px;}
.fs-22 {font-size: 22px;}
.fs-20 {font-size: 20px;}
.fs-18 {font-size: 18px;}
.fs-16 {font-size: 16px;}
.fs-14 {font-size: 14px;}
.fs-12 {font-size: 12px;}

//字体粗细
.font-bold, .bold-700{font-weight: 700;}
.font-semibold, .bold-600{font-weight: 600;}
.font-medium, .bold-500{font-weight: 500;}
.font-normal, .bold-400{font-weight: 400;}
.font-light, .bold-300{font-weight: 300;}


//文本
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-justify {text-align: justify;}
.text-nowrap {white-space: nowrap;}
.text-break {word-break: break-all;}
.text-ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.text-underline {text-decoration: underline;}
.text-line-through {text-decoration: line-through;}
.text-none {text-decoration: none;}


//字体颜色
.text-blue {color: blue;}
.text-red {color: red;}
.text-green {color: green;}
.text-yellow {color: yellow;}
.text-orange {color: orange;}
.text-purple {color: purple;}
.text-cyan {color: cyan;}
.text-geekblue {color: #2f54eb;}
.text-lime {color: #a0d911;}
.text-magenta {color: #eb2f96;}
.text-volcano {color: #fa541c;}
.text-gold {color: #faad14;}
.text-gray-1 {color: #fafafa;}
.text-gray-2 {color: #f5f5f5;}
.text-gray-3 {color: #f0f0f0;}
.text-gray-4 {color: #d9d9d9;}
.text-gray-5 {color: #bfbfbf;}
.text-gray-6 {color: #8c8c8c;}
.text-gray-7 {color: #595959;}
.text-gray-8 {color: #434343;}
.text-gray-9 {color: #262626;}
.text-gray-10 {color: #1f1f1f;}
.text-gray-11 {color: #141414;}
.text-gray-12 {color: #000000;}


//鼠标手势
.cursor-pointer {cursor: pointer;}
.cursor-default {cursor: default;}

// 浮动
.overflow-hidden {overflow: hidden;}
.overflow-x-auto {overflow-x: auto;}
.overflow-y-auto {overflow-y: auto;}

.overflow-y-auto { overflow-y: auto; }
.overflow-hidden {overflow: hidden;}


//背景颜色
.bg-white {background-color: #fff;}
.bg-gray {background-color: #f5f5f5;}
.bg-gray-light {background-color: #fafafa;}
.bg-gray-dark {background-color: #e9e9e9;}
.bg-blue {background-color: #1890ff;}
.bg-blue-light {background-color: #e6f7ff;}
.bg-blue-dark {background-color: #0050b3;}
.bg-red {background-color: #ff4d4f;}
.bg-red-light {background-color: #fff1f0;}
.bg-red-dark {background-color: #820014;}
.bg-green {background-color: #52c41a;}
.bg-green-light {background-color: #f6ffed;}
.bg-green-dark {background-color: #237804;}
.bg-yellow {background-color: #faad14;}
.bg-yellow-light {background-color: #fffbe6;}
.bg-yellow-dark {background-color: #ad6800;}
.bg-orange {background-color: #fa8c16;}
.bg-orange-light {background-color: #fff7e6;}
.bg-orange-dark {background-color: #ad4e00;}
.bg-purple {background-color: #722ed1;}
.bg-purple-light {background-color: #f9f0ff;}
.bg-purple-dark {background-color: #391085;}
.bg-cyan {background-color: #13c2c2;}
.bg-cyan-light {background-color: #e6fffb;}
.bg-cyan-dark {background-color: #006d75;}
.bg-geekblue {background-color: #2f54eb;}
.bg-geekblue-light {background-color: #f0f5ff;}
.bg-geekblue-dark {background-color: #10239e;}
.bg-lime {background-color: #a0d911;}
.bg-lime-light {background-color: #fcffe6;}
.bg-lime-dark {background-color: #3f6600;}
.bg-magenta {background-color: #eb2f96;}
.bg-magenta-light {background-color: #fff0f6;}
.bg-magenta-dark {background-color: #610b64;}
.bg-volcano {background-color: #fa541c;}
.bg-volcano-light {background-color: #fff2e8;}
.bg-volcano-dark {background-color: #820014;}
.bg-gold {background-color: #faad14;}
.bg-gold-light {background-color: #fffbe6;}
.bg-gold-dark {background-color: #ad6800;}
.bg-gray-1 {background-color: #fafafa;}
.bg-gray-2 {background-color: #f5f5f5;}
.bg-gray-3 {background-color: #f0f0f0;}
.bg-gray-4 {background-color: #d9d9d9;}
.bg-gray-5 {background-color: #bfbfbf;}
.bg-gray-6 {background-color: #8c8c8c;}
.bg-gray-7 {background-color: #595959;}
.bg-gray-8 {background-color: #434343;}
.bg-gray-9 {background-color: #262626;}
.bg-gray-10 {background-color: #1f1f1f;}
.bg-gray-11 {background-color: #141414;}
.bg-gray-12 {background-color: #000000;}
